<template>
  <div
    class="wrapper container"
    @mousedown.prevent="handleMove"
    ref="wrap"
    :style="{ top, left }"
  >
    <Header></Header>
    <router-view></router-view>
  </div>
</template>

<script>
import Header from "@/components/Header";
export default {
  name: "Index",
  data() {
    return {
      top: 0,
      left: "50%",
    };
  },
  components: {
    Header,
  },
  methods: {
    // 移动音乐窗口
    handleMove(e) {
      if (e.target.classList.contains("header")) {
        document.onmousemove = (e) => {
          var tempTop = parseInt(getComputedStyle(this.wrap).top);
          var tempLeft = parseInt(getComputedStyle(this.wrap).left);
          var aleft = (tempLeft + e.movementX) / 10,
            atop = (tempTop + e.movementY) / 10;
          this.top = atop + "rem";
          this.left = aleft + "rem";
        };
        document.onmouseup = document.onmouseleave = function (e) {
          document.onmousemove = null;
        };
      }
    },
  },
  mounted() {
    this.wrap = this.$refs.wrap;
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  position: absolute;
  transform: translate(-50%, 0);
}
</style>